<template>
    <!-- 人员管理-工资管理 -->
    <div class="empPayroll">
        <div class="top">
            <div class="search">
                <div class="list">
                    <Select v-model="corpType" style="width:200px" placeholder="合作单位:全部">
                        <Option v-for="item in corpList" :value="item.corpId" :key="item.corpId">{{item.corpName}}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <DatePicker type="month" placeholder="请选择时间" style="width: 200px" format="yyyy-MM" v-model="months" :clearable="true"></DatePicker>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list" @click="onSerch">
                    <Button type="primary">搜索</Button>
                </div>
                <div class="list" @click="onReset">
                    <Button>重置</Button>
                </div>
                <input type="text" class="intBox" style="display:none" />
            </div>
            <div class="down">
                <el-button :type="!btnList.includes('emp/payroll/add')?'info':'primary'" @click="updateRow(0)" :disabled="!btnList.includes('emp/payroll/add')" size="small" plain>添加工资记录</el-button>
            </div>
        </div>
        <div class="bottom">
            <div class="table">
                <el-table :data="list" style="width: 100%" :height="tableHeight" :stripe='true'>
                    <el-table-column fixed prop="corpName" label="合作单位" style="width: 10%"></el-table-column>
                    <el-table-column prop="groupName" label="班组名称"></el-table-column>
                    <el-table-column prop="clearingForm" label="结算方式">
                        <template slot-scope="scope">
                            <el-tag type="info" v-if="scope.row.clearingForm == 1" size="small">工时</el-tag>
                            <el-tag type="success" v-if="scope.row.clearingForm == 2" size="small">工程量</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="year" label="年份"></el-table-column>
                    <el-table-column prop="month" label="月份"></el-table-column>
                    <el-table-column prop="attachCnt" label="附件数"></el-table-column>
                    <el-table-column prop="state" label="状态">
                        <template slot-scope="scope">
                            <el-tag type="info" v-if="scope.row.state == 0" size="small">未完成</el-tag>
                            <el-tag type="success" v-if="scope.row.state == 1" size="small">已完成</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="getDetails(scope.$index, list)" type="text" size="small">查看详情</el-button>
                            <el-button :style="!btnList.includes('emp/payroll/del')?'color:#C0C4CC':'color:red'" :disabled="scope.row.state != 0 || !btnList.includes('emp/payroll/del')" @click.native.prevent="remove(scope.$index, list)" type="text" size="small">删除工资记录</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                </div>
            </div>
        </div>

        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="updateModal" :title="isAdd?'新增工资单':'修改工资单'" width="520px" :mask-closable="false">
            <div class="form_list">
                <div class="item">
                    <span class="tip">*</span>
                    <span>班组:</span>
                    <Select v-model="groupId" style="width:300px" placeholder="请选择班组" @on-change="getGroupType">
                        <Option v-for="item in groupEmpList" :value="item.groupId" :key="item.groupId">{{item.groupName}}</Option>
                    </Select>
                </div>
                <div class="item">
                    <span class="tip">*</span>
                    <span>选择月份:</span>
                    <DatePicker type="month" placeholder="请选择月份" style="width: 300px" format="yyyy-MM" v-model="month" :clearable="false"></DatePicker>
                </div>
                <div class="item">
                    <span class="tip">*</span>
                    <span>结算方式:</span>
                    <RadioGroup v-model="clearingForm"  filterable>
                        <Radio label="1">工时</Radio>
                        <Radio label="2">工程量</Radio>
                    </RadioGroup>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { format } from "@/sever/utils.js";
import {
    getPayrollList,
    getPayrollAdd,
    getPayrollRemove,
} from "@/api/api.js";
import {GroupCreate} from "@/mixins/group.js"
export default {
    mixins:[GroupCreate],
    data() {
        return {
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            corpType: "",
            deptId: "",
            months: "",
            list: [],
            corpList: [],
            updateModal: false,
            isAdd: true,
            groupId: "",
            groupName: "",
            month: "",
            removeId: "",
            deleteModal: false,
            submitId: "",
            btnList: [],
            deptName: "",
            tableHeight: window.innerHeight - 305,
            clearingForm:"1",//结算方式
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.deptName = val.name;
                this.pageNum = 1;
                this.current = 1;
                this.corpType = "";
                this.months = "";
                this.getAllList();
                this.getGRPList(this.deptId);
                this.getcorpList(this.deptId);
            }
        }
    },
    methods: {
        getAllList() {
            let year = this.months ? format(this.months, "YYYY-MM-DD").substring(0, 4) : "";
            let month = this.months ? format(this.months, "YYYY-MM-DD").substring(5, 7).replace(/\b(0+)/gi, "") : "";
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                keyword: this.keyword,
                deptId: this.deptId,
                year: year,
                month: month,
                corpId: this.corpType
            };
            getPayrollList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        // getType(item){
        //     this.corpType = item;
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();

        // },
        // getTime(item){
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        // },
        
        onSerch() {
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        onReset(){
            this.corpType = null
            this.months = null
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        pageChange(index) {
            if (this.corpType == undefined) {
                this.corpType = "";
            }
            this.pageNum = index;
            this.getAllList();
        },
        pageSizeChange(index){
            if (this.corpType == undefined) {
                this.corpType = "";
            }
            this.pageSize = index;
            this.getAllList();
        },
        getDetails(index, rows) {
            this.$router.push({
                path: "/emp/payroll_details",
                query: { payrollId: rows[index].payrollId ,clearingForm:rows[index].clearingForm}
            });
        },
        getGroupType(index) {
            this.groupId = index;
            this.groupList.find(i => {
                if (i.groupId == index) {
                    this.groupName = i.groupName;
                }
            });
        },
        updateRow(type, index, rows) {
            this.groupId = "";
            if (this.corpList.length == 0) {
                this.$Modal.warning({
                    title: "提示",
                    content:
                        "该项目下面没有合作单位，暂不能进行添加工资记录，请先在该项目下面添加组件合作单位"
                });
                return;
            } else {
                this.updateModal = true;
            }
            if (type === 0) {
                this.isAdd = true;
                this.corpId = "";
                this.corpName = "";
                this.month = "";
                this.clearingForm = "1";
            } else if (type === 1) {
                this.isAdd = false;
            }
        },
        submitAll() {
            if (this.groupId == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择班组"
                });
                return;
            }
            if (this.month == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择月份"
                });
                return;
            }
            let params = {
                groupId: this.groupId,
                groupName: this.groupName,
                year: format(this.month, "YYYY-MM-DD").substring(0, 4),
                month: format(this.month, "YYYY-MM-DD").substring(5, 7).replace(/\b(0+)/gi, ""),
                deptId: this.deptId,
                clearingForm: this.clearingForm,
            };
            getPayrollAdd(params)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.updateModal = false;
                        this.corpId = "";
                        this.pageNum = 1;
                        this.current = 1;
                        if (this.corpType == undefined) {
                            this.corpType = "";
                        }
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        remove(index, rows) {
            this.removeId = rows[index].payrollId;
            this.deleteModal = true;
        },
        detele() {
            getPayrollRemove(this.removeId)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.corpId = "";
                        this.getAllList();
                        this.deleteModal = false;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },

        cancel(type) {
            if (type == 1) {
                this.updateModal = false;
            } else if (type == 2) {
                this.deleteModal = false;
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.deptName = this.$store.state.porjectObject.name;
        this.getAllList();
        this.getcorpList(this.deptId);
        this.getGRPList(this.deptId);
        this.btnList = JSON.parse(localStorage.getItem("arr"));
    }
};
</script>

<style scoped lang="less">
// @import "./../../assets/style/emp_common.less";
@import "./../../assets/style/themeBase.less";

.empPayroll{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .top {
        width: 100%;
        height: 72px;
        padding: 0 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search {
            padding-top: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-bottom: 20px;
                margin-right: 20px;
                span {
                    width: 70px;
                }
            }
        }
    }
    .bottom {
        width: 100%;
        margin-top: 10px;
        padding: 20px;
        box-sizing: border-box;
        height: calc(100% - 82px);
        background: #fff;
        border-radius: 10px;
    }
}
.form_list {
    width: 96%;
    margin: 0 auto;
    .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        margin-bottom: 20px;
        padding-left: 16px;
            box-sizing: border-box;
        span {
            display: inline-block;
            width: 100px;
        }
        .tip {
            position: absolute;
            top: 0;
            left: 0;
            color: red;
            width:10px;
        }
    }
}

/deep/.el-tag.el-tag--info{
    background-color:rgba(169, 176, 187, 0.1);
    border-radius:2px;
    border-color:#A9B0BB;
    color:#A9B0BB;
}
/deep/.el-tag.el-tag--success{
    background-color: rgba(63, 207, 119, 0.1);
    border-color:#28D79C;
    color: #3FCF77;
    border-radius:2px;
}
</style>
